<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合并表格单元格</title>
<style type="text/css">
#table0 {
  width: 300px;
  border-collapse: collapse;
  text-align: center;
}

tr {
  height: 50px;
}
</style>
</head>
<body>
  <div align="center">
    <input type="button" value="横向合并A1" onclick="mergeColumns()">
    <input type="button" value="纵向合并A1" onclick="mergeRows()">
    <table id="table0" border="1">
      <tr>
        <td>A1</td>
        <td>A2</td>
      </tr>
      <tr>
        <td>B1</td>
        <td>B2</td>
      </tr>
    </table>
    <input type="button" value="重置" onclick="location.reload()">
  </div>
</body>
<script>
  var table0 = document.getElementById("table0");
  var a1 = table0.rows[0].cells[0];//a1是表格table0的第1行第1个单元格
  function mergeColumns() {//合并列
    var a = table0.rows[0];
    if (a1.colSpan === 1) {//如果a1没有跨列
      if (a1.rowSpan === 1)//如果a1没有跨行，则删除a1之后的单元格a2
        a.deleteCell(1);
      else {//否则删除a1之后的a2和b2
        a.deleteCell(1);
        table0.rows[1].deleteCell(0);
      }
      a1.colSpan = 2;//设置a1跨列
    }
  }
  function mergeRows() {//合并行
    var b = table0.rows[1];
    if (a1.rowSpan === 1) {//如果a1没有跨行
      if (a1.colSpan === 1)//如果a1没有跨列，则删除行b的单元格b1
        b.deleteCell(0);
      else {//否则删除行b的单元格（须先删除行末的单元格再依次删除之前的单元格）
        b.deleteCell(1);
        b.deleteCell(0);
      }
      a1.rowSpan = 2;//设置a1跨行
    }
  }
</script>
</html>